<template>
  <div class="layoutNew" :class="[isCollapse ? 'pl0' : '']">
    <div v-if="browserTipShow" class="ie8Text">
      您的浏览器版本过低，为了更好的体验系统功能，推荐下载安装<a
        class="ie8Btn"
        target="_blank"
        href="https://www.google.cn/intl/zh-CN/chrome"
        >谷歌浏览器</a
      >
      获取更好的使用体验！
    </div>
    <div class="layoutLeft" :class="[isCollapse ? 'sw' : '']">
      <sider-bar :isCollapse="isCollapse" :logo="logo"></sider-bar>
    </div>
    <div class="layoutConWrap">
      <div class="layoutTop">
        <my-header @menuToggle="menuToggleFn"></my-header>
      </div>
      <div class="layoutContent">
        <transition name="fade-transform" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import siderBar from "@/layout/SiderBar.vue";
import myHeader from "@/layout/Header.vue";
export default {
  name: "app",
  data() {
    return {
      browserTipShow: false,
      asideWidth: "180px",
      isCollapse: false,
      logo: require("../static/img/logo.jpg")
    };
  },
  components: {
    siderBar,
    myHeader
  },
  methods: {
    menuToggleFn() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style>
@import "./kk-ui/main.css";
@import "./kk-ui/icon.css";
.layoutContent {
  /* 50= navbar  50  */
  height: calc(100vh - 60px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.global-page {
  height: 100%;
}</style
>>
